import { View, Text, ScrollView, Image } from '@tarojs/components'
import { useInfiniteScroll } from 'ahooks'
import { getWithdrawList } from '@/api'

import nodata from '@/static/nodata.png'
import './index.module.scss'

export default function Index() {

  const {
    data: { total = 0, list: dataList = [] } = {},
    loading: initLoading,
    loadMore,
  } = useInfiniteScroll((d) => {
    const page = d ? Math.ceil(d.list.length / 10) + 1 : 1;
    return getWithdrawList({
      size: 10,
      page
    }).then(res => ({ list: res?.data || [], total: res?.total || 0 }))
  }, {
    isNoMore: (res) => res?.list?.length >= res?.total || false,
    onSuccess(res) {
      console.log(res)

    }
  })

  return (
    <View className='index-box'>
      <View className='list-box'>
        {
          total === 0 && !initLoading ? (
            <View className='flex-direction flex-center' style={{ "height": '75vh' }}>
              <Image style={{ width: '100rpx' }} mode='widthFix' src={nodata}></Image>
              <View className='text-ds text-99 margin-top-sm'>暂无数据</View>
            </View>
          ) : (
             <ScrollView
               className='scrollview'
               scrollY
               scrollWithAnimation
               style={{
                  height: '100vh'
                }}
               lowerThreshold={20}
               onScrollToLower={loadMore}
             >
              {dataList?.map?.((item, index) => (
                <View key={item?.id} className={`flex padding-sm ${index % 2 === 1 ? 'bg-white' : 'bg-gray'}`}>
                  <View className='flex-sub'>
                    <View className='margin-bottom-xs text-df'>提现金额：<Text className='text-red text-dl'>{item?.money}元</Text></View>
                    <View className='text-sm text-66'>设备SN号：{item?.sn}</View>
                    <View className='text-sm text-66'>申请时间：{item?.time}</View>
                    <View className='text-sm text-66'>到账时间：{item?.pay_time || '审核中'}</View>
                    <View className='text-sm text-66'>公司名称：{item?.comp_name || '-'}</View>
                    <View className='text-sm text-66' style="color:red;font-size: 32rpx;">{item?.memo}</View>
                  </View>
                </View>
              ))}
                <View className={`cu-load ${dataList?.length >= total ? 'over' : 'loading'}`}></View>
            </ScrollView>
          )
        }
      </View>
    </View>
  )
}
